<script setup>
  import { ref } from 'vue'
  import Maquee from './components/maquee.vue'

  let dataList = ref([{
    id: 1,
    img: '/src/assets/images/1.png'
  },{
    id: 2,
    img: '/src/assets/images/2.png'
  },{
    id: 3,
    img: '/src/assets/images/3.png'
  },{
    id: 4,
    img: '/src/assets/images/4.png'
  },{
    id: 5,
    img: '/src/assets/images/5.png'
  }])

  let dataList2 = ref([{
    id: 1,
    img: '/src/assets/images/6.png'
  },{
    id: 2,
    img: '/src/assets/images/7.png'
  },{
    id: 3,
    img: '/src/assets/images/8.png'
  },{
    id: 4,
    img: '/src/assets/images/9.png'
  },{
    id: 5,
    img: '/src/assets/images/10.png'
  },{
    id: 6,
    img: '/src/assets/images/11.png'
  }])

  let dataList3 = ref([{
    id: 1,
    img: '/src/assets/images/12.png'
  },{
    id: 2,
    img: '/src/assets/images/13.png'
  },{
    id: 3,
    img: '/src/assets/images/14.png'
  },{
    id: 4,
    img: '/src/assets/images/15.png'
  },{
    id: 5,
    img: '/src/assets/images/16.png'
  }])
  
</script>

<template>
  <div class="pageWrapper">
    <div class="componentBox">
      <div class="maskBox">
        <Maquee :dataList="dataList" />
        <Maquee :dataList="dataList2" direction="reverse" />
        <Maquee :dataList="dataList3"  />
      </div>
    </div>
  </div>
</template>

<style scoped>
.pageWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: rgb(6 9 39 / 1);
}

.componentBox {
    display: flex;
    align-items: center;
    padding: 80px 0;
    width: 1200px;
    height: 640px;
    border: 1px solid rgba(255,255,255, .18);
    border-radius: 6px;
    overflow: hidden;
}

.maskBox {
  width: 100%;
    mask-image: url('./assets/images/maskImg.png');
    -webkit-mask-image: url('./assets/images/maskImg.png');
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-position: top;
    -webkit-mask-position: top;
}
</style>
